<template>
  <scroll-view
      class="tool-scroll-view"
      :scroll-x="true"
      scroll-with-animation
  >
    <view class="byt-toolList" :style="{ minWidth: items.length * minItemWidth + 'rpx' }">
      <view
          @click="toggleDropdown(item)"
          v-for="(item, index) in items"
          :key="item[idKey]"
          class="byt-toolList-item"
          :style="{
          borderColor: item[idKey]===selectedValue ? colorIcon.mainColor || '#448ef7' : ''
        }"
      >
        <text
            :style="{
            color: item[idKey]===selectedValue ? colorIcon.textMainColor || '#1890ff' : ''
          }"
        >
          {{ item[labelKey] }}
        </text>
      </view>
    </view>
    <!-- 下拉框 -->
    <view v-if="dropdownVisible" class="dropdown-menu" @click.stop ref="dropdownMenu">
      <view
          v-for="(option, index) in dropdownOptions"
          :key="index"
          class="dropdown-item"
          @click="selectOption(option)"
      >
        <text>{{ option.name }}</text>
      </view>
    </view>
    <!-- 遮罩层 - 修改显示条件为 dropdownVisible -->
    <view v-if="dropdownVisible" class="dropdown-overlay" @click="closeDropdown"></view>
  </scroll-view>
</template>

<script>
export default {
  name: 'ToolList',
  emits: ['clickToolList', 'update:activeList'],
  props: {
    colorIcon: {
      type: Object,
      default: () => ({
        mainColor: '#448ef7',
        textMainColor: '#1890ff'
      })
    },
    items: {
      type: Array,
      default: () => []
    },
    idKey: {
      type: String,
      default: 'key'
    },
    labelKey: {
      type: String,
      default: 'name'
    }
  },
  computed: {
    minItemWidth() {
      return 120; // 根据实际内容调整
    }
  },
  data() {
    return {
      idList: [],
      dropdownVisible: false,
      dropdownOptions: [],
      selectedValue: null
    };
  },
  mounted() {
    // 注册全局点击事件
    // document.addEventListener('click', this.handleClickOutside);
  },
  beforeDestroy() {
    // 移除全局点击事件
    // document.removeEventListener('click', this.handleClickOutside);
    // uni.$off('click1');
  },
  methods: {
    toggleDropdown(item) {
      this.selectedValue = item.key;
      if (item.children === null || item.children === undefined) {
        this.$emit('clickToolList', item.content);
      } else {
        this.dropdownOptions = item.children;
        setTimeout(() => {
          this.dropdownVisible = true;
        }, 100);
      }
    },

    selectOption(item) {
      this.$emit('clickToolList', item.content);
      this.dropdownVisible = false;
    },

    // 关闭下拉菜单
    closeDropdown() {
      this.dropdownVisible = false;
    },

    handleClickOutside(e) {
      const dropdownMenu = this.$refs.dropdownMenu;
      // 如果点击位置不在下拉菜单内部，则关闭下拉菜单
      if (dropdownMenu && !dropdownMenu.contains(e.target)) {
        this.dropdownVisible = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import url(@/components/css/global.css);
.tool-scroll-view {
  width: 100%;
  height: 80rpx;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin-right: 72rpx;

  ::-webkit-scrollbar {
    display: none;
  }
}

.byt-toolList {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 16rpx;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

.byt-toolList-item {
  padding: 10rpx 20rpx;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 16rpx;
  background-color: white;
  border-radius: 16rpx;
  border: 1.5px solid transparent;
  white-space: nowrap;
  min-width: 100rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;

  text {
    font-size: 28rpx;
    color: #666666;
    display: block;
    line-height: 1;
    max-height: 28rpx;
  }
}

.dropdown-menu {
  position: fixed;
  bottom: 240rpx;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  z-index: 9999;
  max-height: 300rpx;
  min-height: 10rpx;
  overflow-y: auto;
  margin-top: 8rpx;
  margin-left: 36rpx;
  margin-right: 36rpx;
}

.dropdown-item {
  padding: 24rpx 30rpx;
  color: #333;
  font-size: 28rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid rgba(241, 241, 241, 0.8);
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover {
  background: rgba(240, 240, 240, 0.6);
}

/* 新增遮罩层样式 */
.dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0); /* 透明背景 */
  z-index: 9998; /* 低于下拉菜单但高于其他内容 */
}
</style>